<script setup lang="ts">
// 新用户增长趋势
import { storeToRefs } from 'pinia'
import { onMounted, reactive, ref, watch } from 'vue'
import LineChart from '@/components/Echart/line/lineChart.vue'
import { useDealerDataStore } from '@/stores/module/dealerData'
import { headersStore } from '@/stores/apiHeader'
const dealerStore = useDealerDataStore()
const headerStore = headersStore()
const { dealerNetworkGrowthTrend } = storeToRefs(dealerStore) //接口数据
const { month } = storeToRefs(headerStore) //header数据
const dealerNetworkGrowthTrendChartData = reactive({
  title: '',
  info: [],
})
const chartType_MemberbyMonth = ref('') //折线图是否可滑动类型配置

const resetChartType = () => {
  //month 00 代表全年
  if ( month.value !== '00' ){
    chartType_MemberbyMonth.value = 'MemberByMonth'
  }else{
    chartType_MemberbyMonth.value = ''
  }
}

const resetTitle = () => {
    //如果接口没有title 默认给一个
    if (dealerNetworkGrowthTrend.value.title == ''|| dealerNetworkGrowthTrend.value.title == null){
      dealerNetworkGrowthTrendChartData.title = "dealerPerformanceLine"
    }else{
      dealerNetworkGrowthTrendChartData.title = dealerNetworkGrowthTrend.value.title
    }
}

const resetData = () => {
    dealerNetworkGrowthTrendChartData.info.length = 0
    if (dealerNetworkGrowthTrend.value.info && dealerNetworkGrowthTrend.value.info.length > 0){
        dealerNetworkGrowthTrend.value.info.forEach(function(element) {
            var item = {name:'',value:''};
            item.name = element.interval;
            item.value = element.performance;
            dealerNetworkGrowthTrendChartData.info.push(item)
        })
    }
}

onMounted(()=>{
  resetTitle()
  resetChartType()
  resetData()
})

watch(
  () => dealerNetworkGrowthTrend.value,
  () => {
    resetTitle()
    resetChartType()
    resetData()
  },
  { deep: true }
)
</script>
<template>
  <el-carousel-item>
    <card-box>
      <template v-slot:title>
        <h1>{{ dealerNetworkGrowthTrendChartData.title }}</h1>
      </template>
      <LineChart v-if="dealerNetworkGrowthTrendChartData.info && dealerNetworkGrowthTrendChartData.info.length > 0" :chart-data="dealerNetworkGrowthTrendChartData" :chart-type="chartType_MemberbyMonth"/>
    </card-box>
  </el-carousel-item>
</template>
